Emmett Stralka
August 26, 2024
Creating a professional engineering portfolio requires more than just showcasing projects—it demands a technical foundation that demonstrates both engineering rigor and design sensibility. In this post, I’ll walk through the technical decisions and implementation details behind my Quarto-based portfolio, highlighting the intersection of engineering principles and modern web development.
Quarto offers several compelling advantages for technical documentation and portfolio development:
The portfolio implements a comprehensive design system inspired by Apple’s design language:
:root {
/* Apple's Refined Color Palette */
--apple-black: #1d1d1f;
--apple-gray: #86868b;
--apple-blue: #007aff;
--apple-white: #ffffff;
/* Typography System */
--font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
--font-body: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
/* Spacing Scale */
--space-1: 0.25rem;
--space-2: 0.5rem;
/* ... continues with consistent 8pt grid system */
}The layout uses CSS Grid with careful attention to Quarto’s container system:
will-change propertiesProblem: Quarto’s default container system conflicted with full-width design requirements.
Solution: Custom SCSS overrides that work with Quarto’s architecture:
Problem: Complex animations were causing performance issues on mobile devices.
Solution: Implemented prefers-reduced-motion support and optimized animation timing:
Problem: Advanced CSS features like backdrop-filter needed fallbacks.
Solution: Progressive enhancement with proper vendor prefixes:
Building this portfolio has been an exercise in applying engineering principles to web development. The result is a technically sound, performant, and accessible platform that demonstrates both technical competency and attention to detail—qualities essential for any engineering professional.
The combination of Quarto’s technical publishing capabilities with custom CSS and thoughtful UX design creates a portfolio that not only showcases work but also demonstrates the engineering mindset behind its creation.
This post represents the first in a series documenting the technical decisions and implementation details behind my engineering portfolio. Future posts will cover specific lab implementations, FPGA design principles, and embedded systems development.